<template>
  <div>
    <el-button @click="open">打开弹窗</el-button>
    <!-- 设置 drag 弹窗是否可移动 -->
    <ComDialog
      ref="comDialog"
      :option="option"
      :visible.sync="visible"
      @on-submit="onSubmit"
    >
    </ComDialog>
  </div>
</template>
 
<script>
import ComDialog from "./components/com-dialog.vue";

export default {
  components: { ComDialog },
  data() {
    return {
      // 可以按照 element 弹窗来填写
      visible: false,
      option: {
        title: "编辑", // 标题
        // drag: false, // 是否弹窗可移动 false
        // width: "1000px", // 弹窗宽度 60%
        size: "small", // 按钮尺寸
        isFullscreen: true, // 是否开启全屏按钮 true

        submitBtn: true, // 确认按钮 true
        submitBtnType: "primary", // 确认按钮类型
        submitBtnText: "确定", // 确认按钮文字

        cancelBtn: true, // 取消按钮 true
        cancelBtnType: "primary", // 取消按钮类型
        cancelBtnText: "取消",
      },
    };
  },
  methods: {
    // 弹窗点击提交 done:停止加载动画并关闭弹窗 loading:停止加载动画
    onSubmit(done, loading) {
      setTimeout(() => {
        this.$message({
          type: "success",
          message: "提交成功",
        });
        done();
        // loading();
      }, 2000);
    },
    // 打开弹窗
    open() {
      this.visible = true;
    },
  },
};
</script>
 
<style scoped lang = "less">
</style>